<template>
	<view :style="{'--color':color,backgroundColor:pageData.bgColor,padding:`${pageData.margin_tb*2}rpx ${pageData.margin*2}rpx`,
		'--single-h':singleH}" v-if="pageData">

		<!--  单行 -->
		<view :style="{backgroundColor:pageData.foreColor,borderRadius:`${pageData.foreRadius*2}rpx`}" v-if="pageData.display == 1" >
			<swiper class="swiperArow_One" @change="changeSwiper" :current="current" :disable-touch="groups.length == 1">
				<swiper-item v-for="(item,index) in groups" :key="index" class="d-flex a-center" :class="{'j-sa': index == 0}">
					<view class="text-center" :class="{'w-20': index}" v-for="(subItem,subIndex) in groups[index]" :key="subIndex" @click="$banerGo(subItem)">
						<image :src="$imgUrls(subItem.img)" mode="aspectFill" class="tab_img" :class="{'shadow':pageData.shadow==1}"
							:style="[{borderRadius:pageData.radius+'%'},singleSize]"></image>
						<text class="black h6 bold300">{{subItem.title}}</text>
					</view>
				</swiper-item>
			</swiper>
			<view class="dots" v-if="groups.length > 1">
				<view class="dot" :class="{'active':current == index}"
				    v-for="(item,index) in groups" :key="index" @click="current = index"></view>
			</view>
		</view>
		
		
		<!--  双行 -->
		<view :style="{backgroundColor:pageData.foreColor,borderRadius:`${pageData.foreRadius*2}rpx`}" v-if="pageData.display == 2">
			<swiper class="swiper_One" @change="changeSwiper" :current="current" :disable-touch="groups.length == 1">
				<swiper-item v-for="(item,index) in groups" :key="index">
					<view class="w-20 list" v-for="(subItem,subIndex) in groups[index]" :key="subIndex" @click="$banerGo(subItem)"> 
						<image :src="$imgUrls(subItem.img)" mode="aspectFill" class="tab_img" :class="{'shadow':pageData.shadow==1}"
							:style="{borderRadius:pageData.radius+'%'}"></image>
						<text class="black h6 bold300">{{subItem.title}}</text>
					</view>
				</swiper-item>
			</swiper>
			<view class="dots" v-if="groups.length > 1">
				<view class="dot" :class="{'active':current == index}"
				    v-for="(item,index) in groups" :key="index" @click="current = index"></view>
			</view>
		</view>
		
		
		<!--  自然派列 -->
		<view class="rows" v-if="pageData.display == 3" :style="{backgroundColor:pageData.foreColor,borderRadius:`${pageData.foreRadius*2}rpx`}">
			<view class="w-20 list" v-for="(subItem,subIndex) in pageData.list" :key="subIndex" @click="$banerGo(subItem)">
				<image :src="$imgUrls(subItem.img)" mode="aspectFill" class="tab_img" :class="{'shadow':pageData.shadow==1}"
					:style="{borderRadius:pageData.radius+'%'}"></image>
				<text class="black h6 bold300">{{subItem.title}}</text>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name: 'tabItem',
		props:{
			bgcolor:{
				type:String,
				default:'#f3f3f3'
			},
		
			pageData:{
				type:Object,
				default:''
			}
		},
		data() {
			return {
				
				groups:[],
				current:0,
				singleH: '144rpx'
			}
			
			
		},
		mounted() {
			
			if(this.pageData.display == 1){
				this.groups = [];
				let groupSize = 5;
				for (let i = 0; i < this.pageData.list.length; i += groupSize) {
				     let group = this.pageData.list.slice(i, i + groupSize);
				     this.groups.push(group);
				}
			}
			if(this.pageData.display == 2){
				this.groups = [];
				let groupSize = 10;
				for (let i = 0; i < this.pageData.list.length; i += groupSize) {
				     let group = this.pageData.list.slice(i, i + groupSize);
				     this.groups.push(group);
				}
			}
			
		},
		methods: {
			changeSwiper(e){
				this.current = e.detail.current;
			},
		},
		computed: {
			...mapState(['color']),
			singleSize(){ // 单行所选的图片尺寸
				let result = this.pageData.list.find(item=>item.title) // 为undefined则均无标题
				switch (this.pageData.size){
					case 1:
						this.singleH = result ? '196rpx' : '150rpx' // 不带指示器的swiper高度
						return { width: '150rpx', height: '150rpx' }
					case 2:
						this.singleH = result ? '248rpx' : '200rpx'
						return { width: '200rpx', height: '200rpx' }
					default:
						this.singleH = result ? '144rpx' : '100rpx'
						return { width: '100rpx', height: '100rpx' }
				}
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	// 单行
	.swiperArow_One{
		width:100%;
		height:var(--single-h);
	}
	// 双行
	.swiper_One{
		width: 100%;
		height: 284rpx !important;
	}

	.list {
		display: inline-block;
		text-align: center;
	}

	.tab_img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
		display: block;
		margin: 4rpx auto;
	}

	.dots {
		width: 100%;
		height: 42rpx;
		display: flex;
		justify-content: center;
		align-items:center;
	}

	.dot {
		width: 12rpx;
		height: 12rpx;
		background-color: #ABA7A7;
		margin: 0 6rpx;
		border-radius: 50%;
	}

	.active {
		width: 40rpx;
		height: 12rpx;
		background-color: var(--color);
		border-radius: 6rpx;
	}
	.shadow {
		box-shadow: 0 2px 4px rgba(0,0,0,.06);
	}
	
</style>